<template>
  <div class="total-list" ref="wrapperRef">
    <div>
      <!-- 当前城市 -->
      <div class="current-city-area">
        <div class="title">当前城市</div>
        <div class="current-city"><p>{{this.$store.state.city}}</p></div>
      </div>
      <!-- 热门城市区域 -->
      <div class="hot-city-area">
        <div class="title">热门城市</div>
        <div class="hot-city-list">
          <div v-for="item in hotCityList" :key="item.id" @click="chooseCity(item.name)">
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
      <!-- 字母排序区域 -->
      <div class="alphabet-order">
        <div class="title">字母排序</div>
        <div class="alphabet-list">
          <div v-for="(item, key) in alphabetCityList" :key="key" @click="showAlphabet(key)">
            <p>{{ key }}</p>
          </div>
        </div>
      </div>
      <!-- 字母城市区域 -->
      <div class="alphabetA" v-for="(item, key) in alphabetCityList" :key="key" :ref="key">
        <div class="title">{{ key }}</div>
        <div class="A-list">
          <div v-for="city in item" :key="city.id" @click="chooseCity(city.name)">
            <p>{{ city.name }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll'
export default {
  name: 'cityList',
  props: ['hotCityList', 'alphabetCityList'],
  /* 监听数组变化防止还没有渲染完成就启用betterSroll方法 */

  data () {
    return {
      alphabet: ''
    }
  },
  watch: {
    /* 监听字母城市数据数组改变 */
    alphabetCityList () {
      /* 监听DOM重新渲染完毕 */
      this.$nextTick(() => {
        /* 调用betterScroll */
        /* 注意！如果在mounted钩子函数中直接调用的话，可能会存在城市列表数据还没有渲染完毕就加载betterSrcoll会导致无法下拉的问题 */
        this.betterScroll()
      })
    },
    /* 监听字母列表被点击 */
    alphabet () {
      /* 跳转到响应的字母城市区域 */
      this.scroll.scrollToElement(this.$refs[this.alphabet][0])
    }

  },
  methods: {
    /* 加载betterScroll插件 */
    betterScroll () {
      this.scroll = new BetterScroll(this.$refs.wrapperRef, {
        movable: true,
        zoom: true,
        /* betterScroll click事件和tap事件默认为false,会导致bug无法触发点击事件 */
        click: true,
        tap: true
      })
    },
    /* 将字母被点击时的那个字母保存在data对象中，使其被监听从而实现跳转 */
    showAlphabet (key) {
      this.alphabet = key
    },
    /* 监听城市被点击事件 */
    chooseCity (cityName) {
      this.$store.commit('changeCity', cityName)
      this.$router.push('/')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.total-list {
  position: absolute
  top: 1.76rem
  left: 0
  right: 0
  bottom: 0
  overflow:hidden
}
.title {
  background-color: #f5f5f5
  padding: 0.25rem
  font-size: 0.23rem
}
.current-city {
  width: (1/3 * 100)vw
  height: 0.9rem
  color: #212121
  font-size: 0.28rem
  display: flex
  justify-content: center
  align-items: center
  border-right: 1px solid #ddd
  box-sizing:border-box
}
.hot-city-list {
  display: flex
  flex-flow: row wrap
  overflow: hidden
}

.hot-city-list div:nth-child(3n) {
  border-right: none
}

.hot-city-list div{
  box-sizing:border-box
  width: (1/3 * 100)vw
  border-bottom: 1px solid #ddd
  border-right: 1px solid #ddd
  margin-bottom: -1px
  height: 0.9rem
  color: #212121
  font-size: 0.28rem
  display: flex
  justify-content: center
  align-items: center
  position: relative
}
.alphabet-list {
  padding: 0.3rem 0
  flex-flow: row wrap
  display: flex
}
.alphabet-list div {
  width: (1/6 * 100)vw
  display: flex
  justify-content: center
  align-items: center
  height: 0.9rem
}
.A-list {
  display: flex
  flex-flow: row wrap
  overflow: hidden
}
.A-list div{
  box-sizing:border-box
  width: (1/4 * 100)vw
  border-bottom: 1px solid #ddd
  border-right: 1px solid #ddd
  margin-bottom: -1px
  height: 0.9rem
  color: #212121
  font-size: 0.28rem
  display: flex
  justify-content: center
  align-items: center
  position: relative
}
.A-list div p{
  ellipsis()
}
.A-list div:nth-child(4n) {
  border-right: none
}
</style>
